<template>
  <div class="my-appointments-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="header-content">
        <el-button @click="goBack" type="text" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>我的预约</h2>
        <div></div>
      </div>
    </div>
的
    <!-- 预约列表 -->
    <div class="appointments-list">
      <div 
        v-for="appointment in appointments" 
        :key="appointment.id"
        :id="`appointment-${appointment.id}`"
        class="appointment-item"
        :class="{ 'highlighted': highlightedAppointmentId === appointment.id }"
      >
        <div class="appointment-header">
          <div class="doctor-info">
            <h3>{{ appointment.doctorName }}</h3>
            <p>{{ appointment.departmentName }}</p>
          </div>
          <div class="appointment-status" :class="appointment.status">
            {{ getStatusText(appointment.status) }}
          </div>
        </div>
        
        <div class="appointment-details">
          <div class="detail-row">
            <span class="label">预约时间：</span>
            <span class="value">{{ appointment.appointmentDate }} {{ appointment.appointmentTime }}</span>
          </div>
          <div class="detail-row">
            <span class="label">就诊人：</span>
            <span class="value">{{ appointment.patientName }}</span>
          </div>
          <div class="detail-row">
            <span class="label">联系电话：</span>
            <span class="value">{{ appointment.patientPhone }}</span>
          </div>
          <div class="detail-row">
            <span class="label">症状描述：</span>
            <span class="value">{{ appointment.symptoms }}</span>
          </div>
          <div class="detail-row">
            <span class="label">预约时间：</span>
            <span class="value">{{ appointment.createTime }}</span>
          </div>
        </div>
        
        <div class="appointment-actions">
          <el-button 
            v-if="appointment.status === 'pending'"
            type="danger" 
            size="small"
            @click="cancelAppointment(appointment.id)"
          >
            取消预约
          </el-button>
          <el-button 
            v-if="appointment.status === 'confirmed'"
            type="primary" 
            size="small"
          >
            查看详情
          </el-button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && appointments.length === 0" class="empty-state">
      <el-empty description="暂无预约记录" />
      <el-button type="primary" @click="goToDepartments">立即预约</el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mockAPI } from '../utils/mockData'

export default {
  name: 'MyAppointments',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const appointments = ref([])
    const loading = ref(false)
    const highlightedAppointmentId = ref(null)

    // 获取预约列表
    const loadAppointments = async () => {
      loading.value = true
      try {
        const userStr = localStorage.getItem('user')
        const user = JSON.parse(userStr)
        
        const result = await mockAPI.getUserAppointments(user.id)
        if (result.success) {
          appointments.value = result.data
        }
      } catch (error) {
        ElMessage.error('获取预约记录失败')
        console.error('获取预约记录失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'pending': '待确认',
        'confirmed': '已确认',
        'cancelled': '已取消',
        'completed': '已完成'
      }
      return statusMap[status] || status
    }

    // 取消预约
    const cancelAppointment = async (appointmentId) => {
      try {
        await ElMessageBox.confirm('确定要取消这个预约吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const result = await mockAPI.cancelAppointment(appointmentId)
        if (result.success) {
          ElMessage.success('预约已取消')
          loadAppointments() // 重新加载列表
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('取消预约失败')
        }
      }
    }

    // 跳转到科室列表
    const goToDepartments = () => {
      router.push('/departments')
    }

    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }

    onMounted(() => {
      loadAppointments()
      
      // 检查URL参数，如果有指定的预约ID，则高亮显示
      const appointmentId = route.query.appointment
      if (appointmentId) {
        highlightedAppointmentId.value = parseInt(appointmentId)
        // 滚动到指定预约
        setTimeout(() => {
          const element = document.getElementById(`appointment-${appointmentId}`)
          if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'center' })
          }
        }, 500)
      }
    })

    return {
      appointments,
      loading,
      highlightedAppointmentId,
      getStatusText,
      cancelAppointment,
      goToDepartments,
      goBack
    }
  }
}
</script>

<style scoped>
.my-appointments-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.back-btn .el-icon {
  margin-right: 5px;
}

.header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.appointments-list {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.appointment-item {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.appointment-item.highlighted {
  border: 2px solid #409EFF;
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.2);
  transform: translateY(-2px);
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.doctor-info h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.doctor-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.appointment-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.appointment-status.pending {
  background-color: #fff3cd;
  color: #856404;
}

.appointment-status.confirmed {
  background-color: #d1ecf1;
  color: #0c5460;
}

.appointment-status.cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

.appointment-status.completed {
  background-color: #d4edda;
  color: #155724;
}

.appointment-details {
  margin-bottom: 15px;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
  line-height: 1.5;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-row .label {
  color: #666;
  font-size: 14px;
  min-width: 80px;
  flex-shrink: 0;
}

.detail-row .value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

.appointment-actions {
  text-align: right;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.loading {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.empty-state {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.empty-state .el-button {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .appointment-item {
    padding: 15px;
  }
  
  .appointment-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .appointment-status {
    margin-top: 10px;
  }
  
  .detail-row {
    flex-direction: column;
  }
  
  .detail-row .label {
    margin-bottom: 2px;
  }
}
</style> 